<template>
  <a-row class="main">
    <a-col :span="11" class="left" style="display: hide">
      <div class="content-main">
        <div class="back-btn">
          <a href="#/">
            <LeftCircleOutlined />
            <span class="text">返回</span>
          </a>
        </div>
        <div class="form-main">
          <slot name="form"></slot>
        </div>
      </div>
      <div v-if="loading" class="loading-container">
        <div class="progress">
          <a-progress 
            v-if="loadingType === 'progress'" 
            type="circle"
            size="small"
            :percent="progressRatio"
          />
          <div class="progress-text">
            {{ progressText }}
          </div>
        </div>
        <a-spin v-if="loadingType === 'spin'" tip="下载中"/>
      </div>
    </a-col>
    <a-col :span="13" class="log-main">
      <slot name="log"></slot>
    </a-col>
  </a-row>
</template>

<script setup>
import { computed } from 'vue'
import { LeftCircleOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  loadingType: {
    type: String,
    default: 'progress'
  },
  loading: {
    type: Boolean,
    default: false
  },
  progress: Object
})


const progressRatio = computed(() => {
  const { doneCount, totalCount } = props.progress;
  const ratio = doneCount ? (doneCount / totalCount) * 100 : 0
  return Math.round(ratio)
})

const progressText = computed(() => {
  const { doneCount, totalCount } = props.progress;
  return totalCount ? `${doneCount}/${totalCount}` : ""
})

</script>
<style scoped>
.main {
  width: 100%;
  height: 100vh;
}

.left {
  /* padding: 20px; */
  position: relative;
}

.loading-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0px;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center
}

.progress {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-text {
  margin-top: 8px;
  color: #1677ff;
}

.content-main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%
}

.back-btn {
  font-size: 16px;
}

.back-btn a {
  text-decoration: none;
}

.back-btn .text {
  margin-left: 8px;
}

.form-main {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  margin-top: 90px;
}

.log-main {
  height: 100%;
}
</style>